<template>
    <div class="app-container">
        <el-form label-width="120px">
            <el-row :gutter="15">
<!--                <el-col :span="12">-->
<!--                    <el-form-item label="车辆ID">{{detail.carId|filterNull}}</el-form-item>-->
<!--                </el-col>-->
                <el-col :span="12">
                    <el-form-item label="车牌号">{{detail.carNo|filterNull}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车架号">{{detail.vinNo|filterNull}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车辆信息">{{detail.carInfo|filterNull}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车辆状态">
                        <dict-tag :options="dict.type.car_status" :value="detail.carStatus" />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                    <el-form-item label="商业险id">{{detail.id|filterNull}}</el-form-item>
                </el-col> -->
                <el-col :span="12">
                    <el-form-item label="本次年审时间">{{detail.thisTimeInspectionTime|filterNull}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="下次年审时间">{{detail.nextInspectionTime|filterNull}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年审年份">{{detail.thisTimeInspectionTime|inspectionYear}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年检费用">{{detail.inspectionAmount}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年审代理人">{{detail.inspectionAgent|filterNull}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车管所">{{detail.vehicleAdministrativeOffice|filterNull}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年检状态">{{status|filterNull}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年检剩余天数">{{detail.days}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属门店">{{detail.deptName|filterNull}}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属租户">{{detail.tenantName|filterNull}}</el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="附件">
                        <template v-for="item in detail.urlList">
                            <!-- <el-image :src="item" :key="item" style="width:160px;height:90px;margin-right:15px;" fit="contain"></el-image> -->
                            <el-image :key="item" :src="item|mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                        </template>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- <pre>{{detail}}</pre> -->
    </div>
</template>

<script>
import * as inspectionApi from '@/api/maintenance/inspection'

export default {
    dicts: ['car_status'],
    props: ['carId', 'nowDetail', 'status'],
    filters: {
        inspectionYear(date) {
            if (date) {
                return new Date(date).getFullYear() || '--';
            }
            return '--';
        },
    },
    data() {
        return {
            detail: {
                carId: '',
                carNo: '',
                vinNo: '',
                carInfo: '',
                carStatus: '',
                id: '',
                thisTimeInspectionTime: '',
                nextInspectionTime: '',
                inspectionYear: '',
                inspectionAmount: '',
                inspectionAgent: '',
                vehicleAdministrativeOffice: '',
                type: '',
                days: '',
                deptName: '',
                tenantName: '',
                urlList: [],
            },
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            inspectionApi.getInspection(this.carId).then(response => {
                this.detail = response.data;
            });
        },
    },
}
</script>
